﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>jeDate日期控件</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery.jedate.js"></script>
<link type="text/css" rel="stylesheet" href="skin/jedate.css">
<style>
.bodys{ padding:50px 0 0 50px;}
.datainp{ width:200px; height:30px; border:1px #A5D2EC solid;}
.datep{ margin-bottom:40px; line-height:24px; margin-right:15px;}
.wicon{background-image: url(""); background-repeat:no-repeat; background-position:right center;}
</style>
</head>

<body class="bodys">
<div style="width:100%; margin-bottom:50px; overflow:hidden;">
<ul>
<li class="datep"><a href="http://www.jayui.com/jedate/">详细日期控件API</a></li>
<li class="datep" style="width:700px;">jeDate除了包含初始化日期加减N、日期标注点、输入框可以直接输入时间、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。<br/><span style="color: green">您可以免费将她用于任何个人项目。但是不能去除头部信息。</span>  QQ群：516754269</li>
<li>
<span style="color: red">jeDate从3.5版本开始改为jquery版本的日期控件</span><br/><br/>
<span style="color: red">此为部分个例展示，更多请看</span> <a href="http://www.jayui.com/jedate/">详细日期控件API</a>。<br/><br/>
</li>
<!--<input type="checkbox" formatval="YYYY-MM-DD" onclick="thatcheckbox(this)">-->
    <!--<li class="datep"><input class="datainp" id="inyear" type="text" placeholder="YYYY-MM-DD hh:mm:ss" value=""  readonly></li>-->

    <li class="datep"><input class="datainp wicon" id="date02" type="text" placeholder="YYYY-MM-DD" value=""  readonly></li>

</ul>
</div>

<script type="text/javascript">
var cancel ={
    minDate:'2015-06-16 23:59:59',
    maxDate:'2017-02-16 23:59:59'
}
var opts = $.extend({
     type:"je",
     minDate:undefined,
     maxDate:undefined
},cancel);
if (opts.type == "je") {
    $("#optsdate").jeDate({
        isinitVal: true,
        festival: true,
        ishmsVal: false,
        minDate: opts.minDate,
        maxDate: opts.maxDate,
        format: "YYYY-MM-DD hh:mm",
        zIndex: 3000
    })
}
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
var start = {
    format: 'YYYY-MM-DD hh:mm:ss',
    minDate: '2014-06-16 23:59:59', //设定最小日期为当前日期
    festival:true,
    //isinitVal:true,
    maxDate: $.nowDate(0), //最大日期
    choosefun: function(elem,datas){
        end.minDate = datas; //开始日选好后，重置结束日的最小日期
    },
    okfun:function (elem,datas) {
        alert(datas)
    }
};
var end = {
    format: 'YYYY年MM月DD日 hh:mm:ss',
    minDate: $.nowDate(0), //设定最小日期为当前日期
    festival:true,
    //isinitVal:true,
    maxDate: '2099-06-16 23:59:59', //最大日期
    choosefun: function(elem,datas){
        start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
    }
};
$("#inpstart").jeDate(start);
$("#inpend").jeDate(end);


$("#date01").jeDate({
    isinitVal:true,
    festival:true,
    ishmsVal:false,
    minDate: '2016-06-16 23:59:59',
    maxDate: $.nowDate(0),
    format:"YYYY-MM-DD hh:mm:ss",
    zIndex:3000,
})
$("#date02").jeDate({
    isinitVal:true,
    festival:true,
    
    format:"YYYY-MM-DD",
    
})
$("#date03").jeDate({
    isinitVal:true,
    festival:true,
    ishmsVal:false,
    minDate: '2016-06-16 23:59:59',
    maxDate: $.nowDate(0),
    format:"YYYY-MM-DD",
    zIndex:3000,
})
$("#date04").jeDate({
    isinitVal:true,
    festival:true,
    ishmsVal:false,
    minDate: '2016-06-16 23:59:59',
    maxDate: $.nowDate(0),
    format:"YYYY-MM",
    zIndex:3000,
})
$("#date05").jeDate({
    isinitVal:true,
    festival:true,
    ishmsVal:false,
    minDate: '2016-06-16 23:59:59',
    maxDate: $.nowDate(0),
    format:"hh:mm:ss",
    zIndex:3000,
})


    function testShow(elem){
        $.jeDate(elem,{
            insTrigger:false,
            isinitVal:true,
            festival:true,
            ishmsVal:false,
            minDate: '2016-06-16 23:59:59',
            maxDate: $.nowDate(0),
            format:"hh:mm",
            zIndex:3000,
        })
    }

</script>

</body>
</html>
